<template>
	<view class="page">
		<view class="avater">
			<img class="image" :src="iconFilePath" @click="updateImage()" mdoe="aspectFill" alt="" />
			<button style="width: 90%;" @click="previewImages()">预览</button>
		</view>

		<view>
			<view class="weathBox">
				<view class="weath-item">日期：{{totime}}</view>
				<view class="weath-item">{{tonumber}}</view>
				<view class="weath-item">{{toptem}}</view>
				<view class="weath-item">{{bottomtem}}</view>
			</view>
			<view>
				<button style="width: 90%; " @click="downloadImage()">下载图片</button>
			</view>
			<view >
				<image :src="downimage" class="downimage"></image>
				<view>{{tolog}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath: "/static/logo.png",
				imageUrl: 'https://cdn.pixabay.com/photo/2025/05/22/15/49/wood-9616079_1280.jpg',
				totime: "",
				tonumber: "",
				toptem: "",
				bottomtem: "",
				tolog: "",
				downimage: ""
			}
		},
		onLoad() {
			this.WeaShow();
		},
		methods: {
			// 选择图片
			updateImage() {
				console.log('showImage');
				// 选择图片
				uni.chooseImage({
					// count:1,
					sourceType: ['album'],
					success: (res) => {
						console.log('showImage---->success' + JSON.stringify(res));
						this.iconFilePath = res.tempFilePaths[0];
						// 图片预览
						uni.previewImage({
							urls: res.tempFilePaths
						})
					}
				})
			},
			// 单独预览图片
			previewImages() {
				uni.previewImage({
					urls: res.tempFilePaths
				})
			},
			WeaShow() {
				uni.request({
					url: "http://t.weather.sojson.com/api/weather/city/101230501",
					success: (res) => {
						// console.log("接口返回数据：", res.data);
						if (res.data.status == 200) {
							const forecast = res.data.data.forecast[1];
							this.totime = forecast.ymd,
								this.tonumber = forecast.week,
								this.toptem = forecast.high,
								this.bottomtem = forecast.low
						}
					},
					fail: (err) => {
						console.error("接口请求失败：", err);
					}
				})
			},
			downloadImage() {
				uni.downloadFile({
					url: this.imageUrl,
					timeout: 10000,
					success: (res) => {
						console.log(res);
						if (res.statusCode == 200) {
							// console.log("下载成功" + res.tempFilePath);
							this.downimage = res.tempFilePath;
							this.tolog = "下载成功";
						} else {
							this.tolog = "下载失败";
						}
					},
					fail: (err) => {
						this.tolog = `下载出错: ${err.errMsg}`;
						console.error('下载出错', err);
					}
				}).onProgressUpdate((res) => {
					const progress = res.progress;
					this.tolog = '正在下载：' + `${res.progress}%`;
					console.log('下载进度：', res.progress + "%");
				})
			}

		}
	}
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.avater {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image {
		width: 100px;
		height: 100px;
	}

	.weath-item {
		margin-left: 30rpx;
	}
</style>